<template>
  <!-- 可视化小盒子 -->
  <div
    v-show="show"
    v-if="reFresh"
    class="draw-visualization"
    :draggable="draggable"
  >
    <div class="box-top">
      <a-row>
        <a-col :span="8" :offset="1">
          <span
            v-show="!nameModifiable"
            :title="widget.name"
            class="node-perspective-text"
            >{{ widget.name }}</span
          >
          <a-input
            v-show="nameModifiable"
            v-model="tmpName"
            class="input-style"
            @keyup.enter="inputToLabel"
          ></a-input>
        </a-col>
        <a-col :span="2" :offset="12">
          <a-dropdown v-show="currentType === 'perspective'">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="favorite">
                收藏
              </a-menu-item>
              <a-menu-item key="2" @click="rename">
                重命名
              </a-menu-item>
              <a-menu-item key="3" @click="edit">
                编辑
              </a-menu-item>
              <a-menu-item key="4" @click="deleteVisual">
                删除
              </a-menu-item>
            </a-menu>
            <a-button shape="circle" class="box-button-style">
              <a-icon-font type="icongengduocaozuo" />
            </a-button>
          </a-dropdown>
          <a-dropdown v-show="currentType === 'favorite'">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="unFavorite">
                取消收藏
              </a-menu-item>
            </a-menu>
            <a-button shape="circle" class="box-button-style">
              <a-icon-font type="icongengduocaozuo" />
            </a-button>
          </a-dropdown>
        </a-col>
      </a-row>
    </div>
    <div class="chart-style">
      <div class="mask"></div>
      <Chart
        v-if="widget.type !== 'error'"
        :chart-type="widget.chartType"
        :config="widgetConfig"
      ></Chart>
      <div v-else class="error-message">{{ widget.message }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch } from 'vue-property-decorator'
import {
  addFavorite,
  deleteFavorite,
  deleteVisualById,
  widgetQueryById,
  updateWidget,
} from '@/api/right-drawer'
import Chart from '@/components/chart/chart.vue'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: { Chart },
})
export default class Visualization extends Vue {
  @Prop({
    type: String,
    default: '',
  })
  currentType!: string

  @Prop({
    type: Object,
    default: null,
  })
  widget!: any

  @Watch('windowVisible')
  public reload() {
    this.reFresh = false
    this.$nextTick(() => {
      this.reFresh = true
    })
  }

  public get selectNode(): any {
    return DataViewStore.selectNode
  }

  public get windowVisible() {
    return DataViewStore.getVisualWindowShow
  }

  public get widgetConfig() {
    return {
      ...this.widget.config,
      xAxisTitleFontSize: 10,
      yAxisTitleFontSize: 10,
      axisTitleIsShow: false,
      xAxisRenderMode: 'simple',
      yAxisRenderMode: 'simple',
      titleIsShow: false,
      padding: [10, 10, 10, 10],
      xAxisFontSize: 12,
      xAxisFontColor: '#373B52',
      yAxisFontColor: '#373B52',
      xAxisLineColor: '#e9e9e9',
      xAxisLineWidth: 1,
      yAxisLineColor: '#e9e9e9',
      xAxisGridColor: '#e9e9e9',
      yAxisGridColor: '#e9e9e9',
      xAxisTickColor: '#e9e9e9',
      yAxisTickColor: '#e9e9e9',
    }
  }

  private reFresh: boolean = true
  private draggable: boolean = false
  private show: boolean = true
  private nameModifiable: boolean = false
  private tmpName: string = ''

  // 保存修改可视化名称
  public inputToLabel() {
    const postData = {
      id: this.widget.widgetId,
      type: 'task',
    }
    widgetQueryById({ data: postData }).then((response) => {
      if (response.data.code === 100) {
        const nowData = response.data.result
        nowData.name = this.tmpName
        updateWidget({ data: nowData }).then((result) => {
          if (result.data.code === 100) {
            this.widget.name = this.tmpName
            this.nameModifiable = false
          }
        })
      }
    })
  }

  public rename() {
    this.nameModifiable = true
  }

  // 弹出编辑可视化窗口
  public edit() {
    DataViewStore.setVisualWindowShow(true)
    DataViewStore.setOldItems(this.widget)
  }

  // 删除可视化
  public deleteVisual() {
    const postData = {
      id: this.widget.widgetId,
      type: 'task',
    }
    deleteVisualById({ data: postData }).then((response) => {
      if (response.data.code === 100) {
        DataViewStore.setFavoriteStatus(!DataViewStore.getFavoriteStatus)
        this.show = false
      }
    })
  }

  public mounted() {
    this.tmpName = this.widget.name
  }

  // 收藏可视化
  public async favorite() {
    const postData = {
      pipelineId: this.selectNode.pipelineId,
      widgetId: this.widget.widgetId,
    }
    await addFavorite({ data: postData }).then((response) => {
      if (response.data.code === 100) {
        this.$message.success('收藏成功')
        DataViewStore.setFavoriteStatus(!DataViewStore.getFavoriteStatus)
      } else if (response.data.code === 501) {
        this.$message.error('该可视化已收藏')
      }
    })
  }

  // 取消收藏
  public async unFavorite() {
    const postData = {
      pipelineId: this.selectNode.pipelineId,
      widgetId: this.widget.widgetId,
    }
    await deleteFavorite({ data: postData }).then((response) => {
      if (response.data.code === 100) {
        DataViewStore.setFavoriteStatus(!DataViewStore.getFavoriteStatus)
        this.show = false
      }
    })
  }
}
</script>

<style lang="less" scoped>
.draw-visualization {
  border: 1px solid;
  border-color: #ededf4;
  height: 190px;
  margin: 14px;
}

.node-perspective-text {
  color: #5d637e;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.box-top {
  background-color: #f2f5ff;
  height: 40px;
  padding-top: 8px;
}

.input-style {
  height: 30px;
  width: 120px;
}

.box-button-style {
  background-color: #f0f3ff;
  border: 0;
  font-size: 16px;
  margin-top: -6px;
  padding-top: 6px;
}

.chart-style {
  height: 140px;
  position: relative;
  width: 100%;

  .mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 301;
  }

  .error-message {
    font-size: 14px;
    padding-top: 40px;
    text-align: center;
  }
}
</style>
